<template>
  <div>
    <div type="flex" class="booklist" justify="space-around">
      <div class="booksss" v-for="(book, index) in books" :key="index" @contextmenu="showMenu(book)">
        <router-link :underline="false" :to="{ path: '/Ebook', query: { book: book.bookurl } }"
          style="color: white;text-decoration: none;">
          <div class="sssimg"><img :src=book.bookimgurl alt="bookurl"></div>
          <p class="ssstext">{{ book.bookname }}</p>
        </router-link>
        <vue-context-menu style="font-size:20px ;  font-family:'黑体';" :contextMenuData="contextMenuData"
          @savedata="savedata" @bookupload="bookupload" @deletedata="deletedata"
          @callFile="callFile"></vue-context-menu>
      </div>
    </div>
    <input style="display: none;" type="file" id="file" accept="image/*" @change="getPicture()">
  </div>
</template>
<script>
import Idb from 'idb-js'  //  引入Idb
import db_books_config from '../assets/db_books_config'   //  引入数据库配置
export default {
  props: {
    books: Array,//暴露给别的组件引用时所传来的数据
  },
  data() {
    return {
      //所选书籍内容
      book: [],
      // contextmenu data (菜单数据)
      contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: "demo",
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,//位置
          y: null
        },

        // Menu options (菜单选项)
        menulists: [
          {
            fnHandler: "savedata", // Binding events(绑定事件)
            icoName: "fa fa-home fa-fw", // icon (icon图标 )
            btnName: "保存" // The name of the menu option (菜单名称)
          },
          {
            fnHandler: "bookupload",
            icoName: "fa fa-home fa-fw",
            btnName: "导入"
          }
          ,
          {
            fnHandler: "deletedata",
            icoName: "fa fa-home fa-fw",
            btnName: "删除"
          }
          ,
          {
            fnHandler: "callFile",
            icoName: "fa fa-home fa-fw",
            btnName: "更换图片"
          }
        ]
      }
    };
  },
  methods: {
    //右键菜单
    showMenu(book) {
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y
      };
      console.log(book)
      this.book = book;
      console.log(this.book)
    },
    savedata() {
      alert("保存");
    },
    newdata() {
      alert("New");
    },
    //导入
    bookupload() {
      var bookupload = document.getElementById('bookupload');
      bookupload.click()
    },
    //删除书本
    deletedata() {
      console.log(this.book)
      Idb(db_books_config).then(books_db => {
        books_db.delete({
          tableName: "booklist",
          condition: (item) => item.bookindex == this.book.bookindex,
          success: (res) => {
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            });
          }
        });
        books_db.close_db();
      })
      var searchbook = document.getElementById('booksearch');
      searchbook.click()
    },
    //更改图片
    getPicture() {
      var that = this
      var file = document.getElementById('file').files[0];
      console.log(file)
      console.log(this.book.bookindex)
      if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        //监听文件读取结束后事件    
        reader.onloadend = function (e) {
          //e.target.result就是最后的路径地址
          Idb(db_books_config).then(books_db => {
            books_db.update({
              tableName: "booklist",
              condition: item =>
                item.bookindex == that.book.bookindex
              ,
              handle: r => {
                r.bookimgurl = e.target.result;
              },
              success: r => {
                that.$message({
                  showClose: true,
                  message: '图片更改成功',
                  type: 'success'
                });
              }
            });
            books_db.close_db();
          })
          console.log("地址加密***" + e.target.result);
        };

      }
    },
    callFile() {
      //点击添加图片按钮，触发type:"file"的input标签
      let fileDom = document.querySelector("#file")
      fileDom.click()
    }
  }
};
</script>
<style scoped lang='scss'>
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.booklist {
  padding: 10px 0;
  background-color: #f9fafca6;
  display: flex;
  flex-flow: row wrap; //使改div成为弹性盒子，并在单行满时进行换行
  align-content: flex-start;

  .booksss {
    height: 320px;
    width: 250px;
    flex: 0 0 18%; //调整每个div所占大小

    .sssimg {
      margin-top: 2%;
      height: 78%;
    }

    .ssstext {
      margin-top: 1%;
      margin-bottom: 2%;
      height: 17%;
    }

    @media screen and (max-width: 800px) {
      flex: 0 0 30%;
    }
  }

}

p {
  font-size: 1.3vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(0, 0, 0);
}
</style>